<template>
  <div class="container" v-if="data">
    <div v-if="data.broadcast.length>0" class="care-swipe">
      <van-swipe :autoplay="8000">
        <van-swipe-item
          v-for="(item, index) in data.broadcast"
          :key="index"
          @click="pushNativelink(item.weblink)"
        >
          <van-image :src="item.thumb" fit="cover">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div class="care-swipe-inner">
            <div class="care-swipe-inner__text">
              <h1>{{item.title}}</h1>
              <span>{{item.description}}</span>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <van-divider class="divider-title" v-if="data.title">
      <span>{{data.title}}</span>
    </van-divider>
    <van-list v-model="loading" :finished="finished" @load="onList">
      <van-card
        :price="goods.price"
        :desc="goods.description"
        :title="goods.name"
        :thumb="goods.thumb"
        v-for="(goods,index) in list"
        :key="index"
        @click="pushNativelink(goods.weblink)"
      >
        <template slot="num" v-if="goods.date">
          <span class="date-month">{{goods.date.m}}</span>
          <span class="date-day">{{goods.date.d}}</span>
        </template>
        <template slot="origin-price" v-if="goods.market_price>0">￥{{goods.market_price}}</template>
        <template slot="thumb">
          <van-image :src="goods.thumb" fit="cover">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import {
  Tag,
  Divider,
  Icon,
  Card,
  Cell,
  CellGroup,
  Button,
  Grid,
  GridItem,
  Loading,
  Image,
  Swipe,
  SwipeItem,
  List
} from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Divider.name]: Divider,
    [Card.name]: Card,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
    [Button.name]: Button,
    [Loading.name]: Loading,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [List.name]: List
  },

  data () {
    return {
      data: {
        title: '',
        broadcast: []
      },
      list: [],
      loading: false,
      finished: false,
      count: 0,
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },
  created () {
    this.onLoad()
  },

  methods: {
    onLoad () {
      this.axios
        .get('/activity/new')
        .then(response => {
          this.data = Object.assign({}, this.data, response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onList () {
      let page = this.meta.currentPage + 1
      this.axios
        .get('/activity/new/list', {
          params: { page: page },
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          let itemCount = data.items.length
          if (itemCount > 0) {
            this.list = this.list.concat(data.items)
          }
          this.meta = data.meta
          this.loading = false
          if (this.meta.pageCount <= this.meta.currentPage || itemCount <= 0) {
            this.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container {
  position: relative;
  padding-bottom: 50px;
}
.text-through {
  text-decoration: line-through;
  color: #ccc;
  font-size: 12px;
}
.goods-item {
  overflow: hidden;
  &-body {
    padding: 10px 5px 0;
    text-align: center;
    width: 100%;
    > * {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 100%;
    }
    &__name {
      font-size: 14px;
      line-height: 24px;
    }
    &__desc {
      font-size: 12px;
      line-height: 20px;
      color: rgba(0, 0, 0, 0.5);
      transform: scale(0.8);
    }
    &__price {
      font-size: 14px;
      line-height: 24px;
      color: #ff6600;
    }
  }
  .van-button {
    margin-top: 10px;
  }
}
/deep/ .van-grid-item {
  &__content {
    border-radius: 5px;
    padding: 0 0 10px;
    .van-image {
      width: 100%;
      padding-bottom: 100%;
      height: 0;
      background: #f1f1f1;
      border-radius: 5px 5px 0 0;
      &__img {
        position: absolute;
        border-radius: 5px 5px 0 0;
      }
      &__error {
        background: transparent;
      }
    }
  }
}

.care-swipe {
  padding: 0;
  .van-swipe-item {
    padding: 0;
  }
  /deep/ .van-image {
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    background: #f1f1f1;
    &__img {
      position: absolute;
    }
    &__error {
      background: transparent;
    }
  }
  &-inner {
    position: absolute;
    left: 0;
    bottom: 10%;
    width: 100%;
    text-align: center;
    &__text {
      display: inline-flex;
      background: #fff;
      border-radius: 60px;
      padding: 5px 20px;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      h1 {
        margin: 0;
      }
      span {
        font-size: 12px;
      }
      &::after {
      }
    }
  }
}
.van-list {
  min-height: 100vh;
  padding: 0 10px;
  .van-card {
    border-radius: 5px;
    padding: 10px;
  }
  .van-card__title {
    font-size: 16px;
  }
  .van-card__content {
    flex-direction: column;
    justify-content: space-around;
  }
  .van-card__price {
    font-size: 16px;
    color: #ff6600;
  }
  .van-card__num {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 300;
    .date-month {
      color: #fff;
      padding: 0 2px;
      border-radius: 3px 0 0 3px;
      background: #cc8c37;
    }
    .date-day {
      color: #cc8c37;
      padding: 0 2px;
      border-radius: 0 3px 3px 0;
      background: rgba(210, 144, 56, 0.3);
    }
  }
  /deep/ .van-image {
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    background: #f1f1f1;
    border-radius: 5px;
    &__img {
      position: absolute;
      border-radius: 5px;
    }
    &__error {
      background: transparent;
    }
  }
}

.divider-title {
  padding: 0 10px;
  margin: 30px 0 20px;
  border-color: rgba(255, 255, 255, 0.4);

  text-align: center;
  padding: 10px;
  margin: 20px 10px;
  border-radius: 5px;
  background: rgb(210, 223, 237);
  background: -moz-linear-gradient(
    -45deg,
    rgba(210, 223, 237, 1) 0%,
    rgba(200, 215, 235, 1) 26%,
    rgba(190, 208, 234, 1) 51%,
    rgba(166, 192, 227, 1) 51%,
    rgba(175, 199, 232, 1) 62%,
    rgba(186, 208, 239, 1) 75%,
    rgba(153, 181, 219, 1) 88%,
    rgba(121, 155, 200, 1) 100%
  );
  background: -webkit-linear-gradient(
    -45deg,
    rgba(210, 223, 237, 1) 0%,
    rgba(200, 215, 235, 1) 26%,
    rgba(190, 208, 234, 1) 51%,
    rgba(166, 192, 227, 1) 51%,
    rgba(175, 199, 232, 1) 62%,
    rgba(186, 208, 239, 1) 75%,
    rgba(153, 181, 219, 1) 88%,
    rgba(121, 155, 200, 1) 100%
  );
  background: linear-gradient(
    135deg,
    rgba(210, 223, 237, 1) 0%,
    rgba(200, 215, 235, 1) 26%,
    rgba(190, 208, 234, 1) 51%,
    rgba(166, 192, 227, 1) 51%,
    rgba(175, 199, 232, 1) 62%,
    rgba(186, 208, 239, 1) 75%,
    rgba(153, 181, 219, 1) 88%,
    rgba(121, 155, 200, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );

  span {
    color: #cc8c37;
    text-shadow: 5px 1px 6px rgba(255, 255, 255, 0.6);
    font-size: 18px;
    font-weight: 700;
  }
}
</style>
